<template>
  <div class="auth-page">
    <!-- 背景装饰 -->
    <div class="decorator-circle primary"></div>
    <div class="decorator-circle secondary"></div>

    <!-- 主内容 -->
    <div class="auth-container">
      <!-- 头部标题 -->
      <div class="auth-header">
        <h1 class="gradient-title">
          <el-icon><UserFilled /></el-icon>
          {{ isLogin ? '欢迎回来' : '加入我们' }}
        </h1>
        <p class="auth-subtitle">
          {{ isLogin ? '立即登录获取专属优化服务' : '开启智能求职之旅' }}
        </p>
      </div>

      <!-- 双栏布局 -->
      <div class="auth-main">
        <!-- 左侧：扫码登录 -->
        <div class="qrcode-section">
          <div class="qrcode-card">
            <div class="qrcode-wrapper">
              <canvas ref="qrcodeCanvas"></canvas>
              <div v-if="qrcodeExpired" class="qrcode-mask">
                <el-icon><Refresh /></el-icon>
                <p>二维码已过期</p>
                <el-button type="primary" round @click="refreshQrcode">
                  点击刷新
                </el-button>
              </div>
            </div>
            <div class="qrcode-guide">
              <!--              <el-icon><Cellphone /></el-icon>-->
              <p>打开微信扫一扫<br>关注公众号完成登录</p>
            </div>
          </div>
        </div>


        <div style="height: 100%;width: 2px;background-color: #2d3a4b"></div>

        <!-- 右侧：表单登录 -->
        <div class="form-section">
          <el-tabs v-model="activeTab">
            <!-- 手机登录 -->
            <el-tab-pane label="手机登录" name="phone">
              <el-form>
                <el-form-item>
                  <el-input
                      v-model="phone"
                      placeholder="请输入手机号">
                    <template #prepend>
                      <el-select v-model="areaCode" style="width: 90px">
                        <el-option label="+86" value="86" />
                        <el-option label="+852" value="852" />
                        <el-option label="+853" value="853" />
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item>
                  <el-input
                      v-model="smsCode"
                      placeholder="请输入验证码"
                      size="small"
                  >
                    <template #append>
                      <el-button style="display: flex;justify-content: center;align-items: center" size="small"
                                 :disabled="countdown > 0"
                                 @click="sendSmsCode"
                      >
                        {{ countdown ? `${countdown}s后重发` : '获取验证码' }}
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>

                <el-button type="primary" size="large" round @click="handleSubmit">
                  立即登录
                </el-button>
              </el-form>
            </el-tab-pane>

            <!-- 密码登录 -->
            <el-tab-pane label="密码登录" name="password">
              <el-form>
                <el-form-item>
                  <el-input
                      v-model="account"
                      placeholder="手机号/邮箱"
                      prefix-icon="User"
                  />
                </el-form-item>

                <el-form-item>
                  <el-input
                      v-model="password"
                      type="password"
                      placeholder="请输入密码"
                      prefix-icon="Lock"
                      show-password
                  />
                </el-form-item>

                <el-button type="primary" size="large" round @click="handleSubmit">
                  立即登录
                </el-button>
              </el-form>
            </el-tab-pane>
          </el-tabs>

          <div class="auth-actions">
            <el-link @click="isLogin = !isLogin">
              {{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
            </el-link>
            <el-link v-if="isLogin">忘记密码？</el-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import QRCode from 'qrcode'
import { useRouter } from 'vue-router'

const router = useRouter()
const isLogin = ref(true)
const activeTab = ref('phone')
const areaCode = ref('86')
const phone = ref('')
const smsCode = ref('')
const account = ref('')
const password = ref('')
const countdown = ref(0)
const qrcodeCanvas = ref(null)
const qrcodeExpired = ref(false)

// 生成二维码
const generateQrcode = async () => {
  const url = 'https://mp.weixin.qq.com/qr/your-auth-url'
  try {
    await QRCode.toCanvas(qrcodeCanvas.value, url, {
      width: 200,
      margin: 2,
      color: {
        dark: '#409EFF',
        light: '#ffffff'
      }
    })
    startQrcodeTimer()
  } catch (err) {
    console.error('生成二维码失败', err)
  }
}

// 二维码有效期倒计时
const startQrcodeTimer = () => {
  let seconds = 180
  const timer = setInterval(() => {
    seconds--
    if (seconds <= 0) {
      clearInterval(timer)
      qrcodeExpired.value = true
    }
  }, 1000)
}

// 刷新二维码
const refreshQrcode = () => {
  qrcodeExpired.value = false
  generateQrcode()
}

// 发送验证码
const sendSmsCode = () => {
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) clearInterval(timer)
  }, 1000)
}

onMounted(() => {
  generateQrcode()
})
</script>

<style lang="scss" scoped>
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .decorator-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    z-index: 0;

    &.primary {
      width: 400px;
      height: 400px;
      background: var(--primary-color);
      top: -200px;
      right: -200px;
    }

    &.secondary {
      width: 300px;
      height: 300px;
      background: #36c2cf;
      bottom: -150px;
      left: -150px;
    }
  }

  .auth-container {
    background: white;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    position: relative;
    z-index: 1;
    width: 900px;
  }

  .auth-header {
    text-align: center;
    margin-bottom: 40px;

    .gradient-title {
      font-size: 2.4rem;
      margin-bottom: 12px;
    }

    .auth-subtitle {
      color: #606266;
      font-size: 1.1rem;
    }
  }

  .auth-main {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .form-section {


    :deep(.el-tabs__nav-wrap) {
      justify-content: center;
      margin-bottom: 32px;
    }

    .el-form {
      .el-input {
        margin-bottom: 24px;
      }

      .el-button {
        width: 100%;
        margin-top: 16px;
        padding: 20px;
        font-size: 1.1rem;
      }
    }

    .auth-actions {
      margin-top: 24px;
      display: flex;
      justify-content: space-between;
    }
  }

  .qrcode-section {
    text-align: center;

    .qrcode-card {
      background: #f8f9fa;
      border-radius: 16px;
      padding: 32px;
      display: inline-block;

      .qrcode-wrapper {
        position: relative;
        padding: 20px;
        background: white;
        border-radius: 12px;
        margin-bottom: 24px;

        .qrcode-mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255,255,255,0.9);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12px;

          .el-icon {
            font-size: 2rem;
            color: var(--primary-color);
          }
        }
      }

      .qrcode-guide {
        .el-icon {
          font-size: 2.5rem;
          color: #409EFF;
          margin-bottom: 12px;
        }

        p {
          color: #606266;
          line-height: 1.6;
        }
      }
    }
  }
}
</style>